import { detailtext, like } from './Common.scss';
import { Component } from 'react';

class Loading extends Component{
    render() {
        let bg = this.props.bg,
            type = this.props.size,
            display = this.props.display,
            p = [ 0, 1, 2, 3, 4, 5, 6 ,7 ,8 ,9 ,10, 11 ];
        return (
            <div className={`spinner loading-box-${type} loading-box-${bg} loading-box-${display}`}>
                {
                    p.map( i => <div className={`sc${i} se`} key={i}></div> )
                }
            </div>
        )
    }
}

class DetailText extends Component{
    toggle(){
        let isShow = $( this.refs.p ).attr( 'data-show' );
        if( isShow === 'true' ){
            $( this.refs.p ).attr( 'data-show', 'false' );
        }else{
            $( this.refs.p ).attr( 'data-show', 'true' );
        }
    }
    render(){
        return (
            <div className={detailtext}>
                <span className="noselect" onClick={this.toggle.bind(this)}>...</span>
                <p ref="p">{this.props.text}</p>
            </div>
        )
    }
}

export { Loading, DetailText }
